<template>
  <div class="login">
    <!-- <img src="../assets/loginBG.jpg" alt="" /> -->
    <div class="loginForm" style="display: flex; color: #fff">
      <div style="flex: 4; display: flex; justify-content: flex-end">
        <div
          style="display: flex; flex-direction: column; justify-content: center"
        >
          <!-- <div style="border:1px solid blue;">
						<div class="title"></div>
						<div style="display: flex;align-items: center;">
							<span style="color:#fff;font-size: 22px;margin-right: 5px;">登陆</span>
							<div id="" style="color:#ddd;display: flex;padding-bottom: 10px;margin-right: 5px;font-size: 22px;">.</div>
							<span id="" style="font-size: 16px;color:#ddd">注册</span>
						</div>
					</div> -->
          <h1
            style="
              font-family: 'Times New Roman', Georgia, Serif;
              font-weight: bold;
              font-size: 50px;
            "
          >
            赊销订货机构后台
          </h1>
        </div>
      </div>

      <div
        style="
          flex: 6;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <div class="box" style="">
          <h1
            style="
              color: #007aff;
              text-align: center;
              padding-bottom: 20px;
              padding-top: 10px;
              font-family: 'Times New Roman', Georgia, Serif;
            "
          >
            欢迎登录
          </h1>
          <div style="">
            <el-form
              label-width="80px"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              style="margin-top: 47px"
            >
              <el-form-item label="账号:" prop="user">
                <el-input
                  v-model="ruleForm.user"
                  placeholder="账号"
                  @keyup.enter.native="submit"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码:" prop="password">
                <el-input
                  v-model="ruleForm.password"
                  placeholder="密码"
                  type="password"
                  @keyup.enter.native="submit"
                ></el-input>
              </el-form-item>
              <div class="buttonBlock" style="margin-top: 60px">
                <el-button
                  class="formBtn"
                  round
                  @click="submit"
                  style="background-color: #007aff; color: #fff"
                  >登 录</el-button
                >
              </div>
              <!-- <div class="Abtn" style="margin-right: 10px;"><a @click="ForgetPassword" style="color:#007aff;">忘记密码?</a></div> -->
            </el-form>
          </div>
          <!-- <el-tabs v-model="activateName" activate-name="1">
						<el-tab-pane label="" name="1">

						</el-tab-pane>
					</el-tabs> -->
        </div>
      </div>
    </div>
    <!-- 忘记密码框 -->
    <el-dialog title="重置密码" :visible.sync="ForgetVisible">
      <el-form
        ref="ForgetPasswordForm"
        :model="ForgetPasswordForm"
        label-width="80px"
        :rules="ForgetPasswordRules"
      >
        <el-form-item label="手机号" prop="Phone">
          <el-input
            v-model="ForgetPasswordForm.Phone"
            placeholder="手机号"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="ForgetPasswordForm.oldPassword"
            placeholder="旧密码(如忘记可不输入)"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="NewPwd">
          <el-input
            v-model="ForgetPasswordForm.NewPwd"
            placeholder="新密码"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="ConPwd">
          <el-input
            v-model="ForgetPasswordForm.ConPwd"
            placeholder="重复密码"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="SmsCode">
          <div class="formLabel">
            <el-input
              v-model="ForgetPasswordForm.SmsCode"
              placeholder="验证码"
              autocomplete="off"
            ></el-input>

            <el-button
              type="primary"
              style="margin-left: 5px"
              :disabled="disabled"
              @click="sendCode"
              >{{
                !disabled ? "发送验证码" : oneMinute + "重新发送"
              }}</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ForgetVisible = false">取 消</el-button>
        <el-button type="primary" @click="ForgetConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const regExp = new RegExp("^[a-zA-Z0-9_]{3,16}$"); // 手机号正则
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ForgetPasswordForm.NewPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      // 整体页面加载
      fullscreenLoading: false,
      activateName: "1",

      ruleForm: {},
      rules: {
        user: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入账号"));
              } else if (!regExp.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      timer: null,
      oneMinute: 60,
      disabled: false,
      loading: false,
      ForgetVisible: false,
      ForgetPasswordForm: {},
      ForgetPasswordRules: {
        Phone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入手机号"));
              } else if (!regExp.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        NewPwd: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        ConPwd: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    sessionStorage.removeItem("token");
    sessionStorage.removeItem("userInfo");
  },
  mounted() {
    if (this.$route.query.Phone) {
      this.loading = true;
      this.$http
        .post("/Base_Manage/Home/PhoneLogin", {
          userName: this.$route.query.Phone,
        })
        .then((res) => {
          this.loading = false;
          if (res.Success) {
            sessionStorage.setItem("client", "client");
            sessionStorage.setItem("token", res.Data);
            this.$router.replace("/information");
          } else {
            this.$message.error(res.Msg);
          }
        });
    }
  },
  methods: {
    // 忘记密码
    ForgetConfirm() {
      this.$refs["ForgetPasswordForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        if (!this.ForgetPasswordForm.SmsCode) {
          return this.$message.error("请填写验证码");
        }
        this.$http
          .post(
            `/Base_Manage/Base_User/SubResetUserPwd?Phone=${this.ForgetPasswordForm.Phone}&ConPwd=${this.ForgetPasswordForm.ConPwd}&SmsCode=${this.ForgetPasswordForm.SmsCode}`
          )
          .then((res) => {
            if (res.Success) {
              this.$message.success("密码重置成功,请登录");
              this.ForgetVisible = false;
            } else {
              this.$message.error(res.Msg);
            }
          });
      });
    },
    ForgetPassword() {
      // 置空 自动获取手机号
      this.ForgetPasswordForm = {};
      if (this.$refs["ForgetPasswordForm"])
        this.$refs["ForgetPasswordForm"].clearValidate();
      if (this.ruleForm.user) {
        this.ForgetPasswordForm.Phone = this.ruleForm.user;
      }
      this.ForgetVisible = true;
    },
    sendCode() {
      this.$refs["ForgetPasswordForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        clearInterval(this.timer);
        this.disabled = true;
        this.timer = setInterval(() => {
          this.oneMinute--;
          if (this.oneMinute <= 0) {
            clearInterval(this.timer);
            this.oneMinute = 60;
            this.disabled = false;
          }
        }, 1000);
        this.$http
          .post("/Base_Manage/Base_User/ResetUserPwd", this.ForgetPasswordForm)
          .then((res) => {
            if (res.Success) {
              this.$message.success("验证码已经发送至您的手机,请注意查收");
            } else {
              this.$message.error(res.Msg);
            }
          });
      });
    },
    // 点击登录
    submit() {
      var that = this;

      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        //创建loading对象开始遮罩
        this.fullscreenLoading = true;
        this.loading = true;
        this.$http
          .post("/Base_Manage/Home/BankLogin", {
            userName: this.ruleForm.user,
            password: this.ruleForm.password,
          })
          .then((res) => {
            this.loading = false;
            //  console.log(res);
            if (res.Success) {
              sessionStorage.setItem("token", res.Data);
              // 获取用户信息
              this.GetBankOperatorInfo();
              setTimeout(() => {
                this.$message.success("登录成功");
                that.fullscreenLoading = false;
              }, 1000);
            } else {
              this.$message.error(res.Msg);
              that.fullscreenLoading = false;
            }
          });
      });
    },

    // 获取用户信息
    GetBankOperatorInfo() {
      var that = this;
      this.$http.post("/Base_Manage/Home/GetBankOperatorInfo").then((res) => {
        if (res.Success) {
          const userInfoString = JSON.stringify(res.Data.UserInfo);
          sessionStorage.setItem("userInfo", userInfoString);
          setTimeout(function () {
            // 跳转到首页我的商户
            that.$router.replace("/MyMerchant");
          }, 2000);
        } else {
          this.$message.success(res.Msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__item {
  width: 235px;
  text-align: center;
  border-radius: 10px;
  font-size: 18px;
  line-height: 65px;
  height: 70px;
  font-weight: bold;
}

/deep/.el-tabs__item.is-active {
  color: #d50700;
}

/deep/.el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: #d50700;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  list-style: none;
}

/deep/.el-button--primary {
  color: #fff;
  background-color: #d50700;
  border-color: #d50700;
}

.login {
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  max-height: 1080px;
  background-image: url("../assets/login.png");
  background-repeat: no-repeat;
  background-size: cover;

  .formLabel {
    display: flex;
  }

  /*margin-left: 35.5%;*/
  .loginForm {
    width: 100%;
    height: 600px;
    margin-top: 155px;
    position: relative;
    .title {
      content: "";
      width: 25px;
      height: 5px;
      background-color: #fff;
      position: absolute;
      top: 200px;
    }

    .buttonBlock {
      position: relative;
      margin-top: 40px;
      text-align: center;
    }

    .Abtn a {
      color: #d50700;
      float: right;
    }

    .formInput {
      margin: 7px 0;

      /deep/.el-input__inner {
        border-radius: 40px;
        // border-color: #888;
      }
    }

    .formBtn {
      font-weight: bold;
      font-size: 18px;
      width: 60%;
      display: inline-block;
      justify-content: center;
      margin: 0 auto;
    }
  }
}

/* margin: 50px auto 0px;*/
.box {
  padding: 10px;
  background-color: white;
  box-shadow: 0px 5px 40px #d507006c;
  margin-top: 20px;
  width: 470px;
  height: 390px;
  border-radius: 20px;
}

::v-deep .el-tabs {
  .el-tabs__active-bar {
    background-color: transparent;
  }
  .el-tabs__item.is-active {
    color: #007aff;
  }
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
}

#option {
  border-radius: 20px;
  margin-bottom: 40px;
  width: 92%;
  height: 88px;
  line-height: 40px;
  border-radius: 20px;
  margin-bottom: 40px;
}

#option li {
  float: left;
  text-align: center;
  width: 40%;
  /*background: white;*/
  height: 38px;
  cursor: pointer;
  color: #4f4f4f;
  font-size: 16px;
  border-radius: 20px;
  font-weight: bold;
  color: #ff0000;
}

#option li.active {
  background: linear-gradient(to left, #40e4e5, #28ccd6);
  color: white;
  border-radius: 20px;
}
</style>
